<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <el-card :body-style="{ padding: '20px' }">
            <div class="demo-image__placeholder">
              <div class="block">
                <div style="padding: 14px">
                  <span class="demonstration">您上传的图片</span>
                </div>
                <el-image :src="src" fit="contain">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
            </div>
          </el-card>

          <el-card :body-style="{ padding: '100px' }">
            <el-upload
              align="middle"
              drag
              action=""
              multiple
              :limit="1"
              :auto-upload="false"
              :on-change="getFile"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>

              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-card>

          <el-card :body-style="{ padding: '20px' }">
            <div style="padding: 14px">
              <span class="demonstration">选择风格图片</span>
            </div>
            <div class="demo-image__placeholder">
              <div class="block">
                <el-image :src="styles[kind - 1].src" fit="contain">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </div>
            </div>
            <el-form :inline="false" class="demo-form-inline">
              <el-form-item label="风格">
                <el-select v-model="kind" placeholder="请选择">
                  <el-option
                    v-for="item in styles"
                    :key="item.kind"
                    :label="item.label"
                    :value="item.kind"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="处理图片">
                <el-button
                  style="margin-left: 10px"
                  size="small"
                  type="primary"
                  @click="submitUpload"
                  >上传</el-button
                >
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-col>

      <el-col :span="12">
        <div class="grid-content bg-purple" v-loading="loading">
          <el-card :body-style="{ padding: '20px' }">
            <div style="padding: 14px">
              <span>处理后的图片</span>
            </div>
            <img style="height: 100%" :src="processed" class="image" />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import M from 'minimatch';

export default {
  name: "AIProcess",
  data() {
    return {
      src: "http://106.14.90.220/static/img/a.jpg",
      image: "",
      identifier: "",
      processed:
        "http://106.14.90.220/static/img/b.jpg",
      loading: false,
      styles: [
        {
          kind: 1,
          label: "夜空",
          src: 'http://106.14.90.220/static/img/1.jpg'
        },
        {
          kind: 2,
          label: "陶瓷",
          src: 'http://106.14.90.220/static/img/2.jpg',
        },
        {
          kind: 3,
          label: "五色",
          src: 'http://106.14.90.220/static/img/3.jpg',
        }
      ],
      kind: 1,
      args: {}
    };
  },


  methods: {
    submitUpload() {
      // TODO Axios发送请求
      console.log(this.args);
      if (!this.image) return;
      this.loading = true;
      this.$axios({
        url: "http://106.14.90.220:8000/api/images/transition",
        method: "post",
        data: JSON.stringify({
          image: this.image,
          kind: this.kind,
          args: this.args
        }),
        headers: {
          "Content-Type": "application/json",
        },
      }).then((response) => {
        // console.log(response.data);
        // this.identifier = response.data.identifier;
        // console.log(this.identifier)
        // 循环请求

        // let timer = setInterval(() => {
        //   this.$axios({
        //     url: `http://127.0.0.1:5000/api/images/${this.identifier}`,
        //     method: "get",
        //   }).then((result) => {
        //     // console.log(result);
        //     // console.log(result.data.status);
        //     if (result.data.status === 0) {
        //       clearInterval(timer);
        //       this.processed = "data:image/.+;base64," + result.data.image;
        //       this.loading = false;
        //     }
        //   });
        // }, 3000);
        if (response.data.code === 0) {
          // clearInterval(timer);
          this.processed = "data:image/.+;base64," + response.data.image;
          this.loading = false;
        }
      });
    },

    getFile(file) {
      if (file.raw.type === "image/jpeg" || file.raw.type === "image/png") {
        this.src = window.URL.createObjectURL(file.raw);
        this.getBase64(file.raw).then((res) => {
          this.image = res;
          // console.log(this.image);
        });
      }
    },

    // 处理图片文件
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function () {
          imgResult = reader.result;
        };
        reader.onerror = function (error) {
          reject(error);
        };
        reader.onloadend = function () {
          resolve(imgResult);
        };
      });
    },
  },
};
</script>

<style scoped>
.el-card {
  margin-top: 10px;
}
.el-form {
  margin-top: 10px;
}

.grid-content {
  margin-left: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
